<template>
    <div>
      <h2>animation动画</h2>

        <div  ref="kongtiao2" id="kongtiao2" :style="{width:width+'px',height:height+'px',backgroundColor:'red',marginLeft:marginLeft+'px',marginTop:marginTop+'px',position:'fixed'}"></div>

        <br>
        <hr>
        <br>
        <div class="kongtiaojifang" id="kongtiao1" ref="kongtiao"
             @mousedown="mouseDownHandleelse($event)"
             @mouseup="mouseUpHandleelse($event)">
        </div>

      <div id="box">
        <el-button @click="rightMove">div右移动</el-button>
        <el-button @click="leftMove">div左移动</el-button>
        <el-button @click="topMove">div上移动</el-button>
        <el-button @click="downMove">div下移动</el-button>
        <el-button @click="StopMove">停止</el-button>
      </div>

    </div>
</template>

<script>
    export default {
        name: "Animation",
        data(){
          return{
            width:100,
            height:100,
            marginLeft:10,
            marginTop:10,
            time:null,
            speed:10,
            target:1000,
            target2:300,
            initposition:10,
            initTopPosition:10,
            moveDataelse:{
              x:null,
              y:null
            }
          }
        },
      mounted() {
          // this.rectangleCrashExamine(this.$refs.kongtiao2,this.$refs.kongtiao1)
          // this.rectangleCrashExamine(this.$refs.kongtiao2,this.$refs.kongtiao1)
      },
      methods:{
          rightMove(){
           clearInterval(this.time)
           this.time =  setInterval(()=>{
              // this.width>1000 ? this.width=100:this.width +=2
             if (this.marginLeft<this.target){
               this.marginLeft+=this.speed
             }else{
               clearInterval(this.time)
             }

            },50)

          },
          leftMove(){
            clearInterval(this.time)
            this.time =  setInterval(()=>{
              // this.width>1000 ? this.width=100:this.width +=2
              if (this.marginLeft>this.initposition){
                this.marginLeft-=this.speed
              }
            },50)

          },
          topMove(){
            clearInterval(this.time)
            this.time =  setInterval(()=>{
              // this.width>1000 ? this.width=100:this.width +=2
              if (this.marginTop>=this.initTopPosition){
                this.marginTop-=this.speed
              }
            },50)

          },
          downMove(){
            clearInterval(this.time)
            this.time =  setInterval(()=>{
              // this.width>1000 ? this.width=100:this.width +=2
              if (this.marginTop<this.target2){
                this.marginTop+=this.speed
              }
            },50)

          },
          StopMove(){
            clearInterval(this.time)
          },

          mouseDownHandleelse (event) {
            this.moveDataelse.x = event.pageX - this.$refs.kongtiao.offsetLeft
            this.moveDataelse.y = event.pageY - this.$refs.kongtiao.offsetTop
            event.currentTarget.style.cursor = 'move'
            window.onmousemove = this.mouseMoveHandleelse
          },
          mouseMoveHandleelse (event) {
            let moveLeft = event.pageX - this.moveDataelse.x + 'px'
            let moveTop = event.pageY - this.moveDataelse.y + 'px'
            this.$refs.kongtiao.style.left = moveLeft
            this.$refs.kongtiao.style.top = moveTop

            var ev = ev|| window.event;
            //距离  与自身
            var t1 = this.$refs.kongtiao.offsetTop;
            var l1 = this.$refs.kongtiao.offsetLeft;
            var r1 = this.$refs.kongtiao.offsetLeft + this.$refs.kongtiao.offsetWidth;
            var b1 = this.$refs.kongtiao.offsetTop + this.$refs.kongtiao.offsetHeight;

            var t2 =this.$refs.kongtiao2.offsetTop;
            var l2 = this.$refs.kongtiao2.offsetLeft;
            var r2 = this.$refs.kongtiao2.offsetLeft +this.$refs.kongtiao2.offsetWidth;
            var b2 = this.$refs.kongtiao2.offsetTop + this.$refs.kongtiao2.offsetHeight;
            if(b1<t2 || l1>r2 || t1>b2 || r1<l2){// 表示没碰上
            }else{
              // console.log("游戏结束")
              alert("游戏结束")
              this.$refs.kongtiao2.style.background = 'blue';
            }
            // this.$refs.kongtiao.style.left = ev.clientX - disX +'px';
            // this.$refs.kongtiao.style.top = ev.clientY - disY +'px';
          },
          mouseUpHandleelse (event) {
            window.onmousemove = null
            event.currentTarget.style.cursor = 'move'
            console.log('鼠标松开了')
          },
          //碰撞检测原理
      /*    rectangleCrashExamine (obj1, obj2) {
            var obj1Left = obj1.offsetLeft;
            var obj1Width = obj1.offsetLeft + obj1.offsetWidth;
            var obj1Top = obj1.offsetTop;
            var obj1Height = obj1.offsetTop + obj1.offsetHeight;

            var obj2Left = obj2.offsetLeft;
            var obj2Width = obj2.offsetLeft + obj2.offsetWidth;
            var obj2Top = obj2.offsetTop;
            var obj2Height = obj2.offsetTop + obj2.offsetHeight;

            if (!(obj1Left > obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top)) {
              alert("游戏结束")
              return true;
            }
            return false;
          }*/
        }
    }
</script>

<style scoped>
  .kongtiaojifang {
    height: 100px;
    width: 100px;
    position: fixed;
    left: 550px;
    background-color: yellow;
    cursor: pointer;
  }
    #box{
      display: flex;
      flex-direction:row-reverse
    }
</style>
